<template>
   
   <div class="head" style="margin-bottom: 10px;margin-top: 10px;">
    <el-button type="danger" style="right: 1000px;position: relative;" @click="batchDel">批量删除</el-button>
    <el-button type="primary" @click="insertOne">新增分类</el-button>
    <!-- <el-button type="primary">新增套餐分类</el-button> -->
   </div>
   
   <el-table :data="tableData" border style="width: 100%;height: 600px;" stripe 
    ref="multipleTableRef"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="name" label="分类名称" width="180" />
    <el-table-column prop="type" label="分类类型" width="180" />
    <el-table-column prop="updateTime" label="修改时间" />
    <el-table-column prop="ord" label="排序" />
    <el-table-column  label="操作" >
        <template #default="scope">
         <el-button type="primary" @click="updateOne(scope.$index,scope.row)">修改</el-button>
         <el-button type="danger" @click="deleteOne(scope.$index,scope.row)">删除</el-button>
         <el-button @click="sort(scope.$index)"><el-icon><Sort /></el-icon></el-button>
        </template>
    </el-table-column>
   </el-table>


 
   <!-- 新增菜品分类对话框 -->
   <el-dialog v-model="dialogFormVisible" :title="title">
    <el-form :model="form">
      <el-form-item label="分类名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" placeholder="请输入分类名称" />
      </el-form-item>

      <el-form-item label="分类类型" :label-width="formLabelWidth">
        <el-select v-model="form.type" placeholder="请选择分类类型">
          <el-option label="菜品分类" value="1" />
          <el-option label="套餐分类" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="排序" :label-width="formLabelWidth">
        <el-input v-model="form.order" autocomplete="off" placeholder="请输入排序字段"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="quexiao">取消</el-button>
        <el-button type="primary" @click="addOne">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

<!-- 删除对话框 -->
<el-dialog
    v-model="centerDialogVisible"
    title="删除分类"
    width="30%"
    align-center
  >
    <span>你确定要删除该分类吗?</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteCate">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">

import { ref ,onMounted} from 'vue'
import { ElTable } from 'element-plus'
import {ElMessage} from 'element-plus'

import categoryApi from '@/api/category';
;



//多选功能
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<[]>([])
const toggleSelection = (rows?: []) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val:[]) => {
   multipleSelection.value = val
}

//获取分类数据
onMounted(()=>{
  getCategory()
})

async function getCategory() {
   const data = await categoryApi.getCategorys(1,100)
   tableData.value = data.data.list
}


const tableData = ref([])

//新增或者修改的标题
const title = ref('新增分类')


//新增菜品对话框
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
//菜品表单
const form = ref({
   id:'',
   name:'',
   type:'',
   typeId:1,
   order: 1
})

const insertOne=()=>{
  dialogFormVisible.value = true;
  title.value = '新增分类'
}
//新增分类
const addOne=async ()=>{

       if(form.value.type === "1") form.value.type ="菜品分类"
      else form.value.type = "套餐分类"
   //如果是新增
    if(title.value=='新增分类'){
 
      const data = await categoryApi.addCateGroy(form.value)
      if(data.code===200){
        addMsg()
        getCategory()
      }else{
        ElMessage({"message":data.data,"type":"warning"})
      }
     
    }else{
      //修改
       const data = await categoryApi.updateCateGory(form.value)
       if(data.code===200){
         //在查询一次
         ElMessage({"message":data.data,"type":"success"})
         getCategory() 
       }else{
         ElMessage({"message":data.data,"type":"warning"})
       }
       
    }

    dialogFormVisible.value = false
    form.value.name=''
    form.value.type='',
    form.value.order=1
}
//取消新增
const quexiao=()=>{
    dialogFormVisible.value = false
    form.value.name=''
    form.value.type='',
    form.value.order=1
}
//删除分类
//要删除的数据(表格的索引)临时先保存一下
const delIndexs = ref([0])
const centerDialogVisible = ref(false)
const delOneOrAll = ref(false) //默认是删除一个
const deleteOne=(index:number,row:any)=>{
    centerDialogVisible.value = true;
    //给delIndexs赋值
    delIndexs.value[0] = tableData.value[index].id
}
//批量删除按钮
 const batchDel=()=>{
   centerDialogVisible.value = true
   delOneOrAll.value = true
 }


//批量删除
const deleteCate = async ()=>{
   var ids: any[] = []
    if(delOneOrAll.value===false){
        ids = delIndexs.value
    }else{
        multipleSelection.value.forEach(item =>{
           ids.push(item.id)
        })
    }
    //然后删除
    const data = await categoryApi.deleteCates(ids)
    if(data.code===200){
      ElMessage({"message":data.data,"type":"success"})
      getCategory()
    }else{
      ElMessage({"message":data.data,"type":"warning"})
    }
    centerDialogVisible.value = false
   
}

//临时保存

//修改分类
const updateOne=(index:number,row:any)=>{
     title.value = '修改分类'
     dialogFormVisible.value = true;
     form.value.name = row.name;
     form.value.type = row.type;
     form.value.order = row.ord;
     form.value.id = row.id
}

//排序
const sort=(index:number)=>{
  
  
}


//消息提示
const deleteMsg = () => {ElMessage({ message: '删除成功',type: 'success', })}
  
const addMsg = () => { ElMessage({ message: '已添加分类', type: 'success',  })}
 
const changeMsg = () => {   ElMessage({ message: '已更换排序', type: 'success', })}
   



 
   
   
 






</script>


<style scoped lang="less">
 .head{
    float: right;
 }
.el-input{
    width: 400px;
    height: 40px;
}
</style>